<template>
    <div class="userHome-container">
        <!-- 面包屑 -->
        <Breadcrumb>
            <BreadcrumbItem to="/userHome">个人中心</BreadcrumbItem>
            <BreadcrumbItem>收货地址</BreadcrumbItem>
        </Breadcrumb>
        <Divider orientation="left">收货地址列表</Divider>
        <!-- 新增收货地址 -->
        <div class="add-receiveAddr">
            <Button type="primary" @click="modal3 = true"><Icon type="md-add" /> 新增</Button>
        </div>
        <!-- 收货地址列表 -->
        <div class="receiveAddr-list">
            <div class="receiveAddr-item" v-for="(item,i) in addrList" :key="i">
                <div class="item-left">
                    <p>收货人：{{item.raFullname}}<span class="my-phone">{{item.raPhone}}</span>
                        <span class="defalut" v-if="item.raDefaultAddr==1">默认</span>
                    </p>
                    <p>收货地址：{{item.raAddr}}</p>
                </div>
                <div class="item-right">
                    <a href="#" class="edit" @click="findByIdBefore(item.raId)">编辑</a>
                    <a href="#" class="more" @click="findById(item.raId)" >详情</a>
                    <a href="#" class="delete" @click="deleteById(item.raId)" >删除</a>
                </div>
            </div>
            <!-- <div class="receiveAddr-item">
                <div class="item-left">
                    <p>收货人：杜丽<span class="my-phone">电话号码</span></p>
                    <p>收货地址：xxxxxxxxxx</p>
                </div>
                <div class="item-right">
                    <a href="#" class="edit" @click="modal1 = true">编辑</a>
                    <a href="#" class="more" @click="modal2 = true" >详情</a>
                    <a href="#" class="delete" >删除</a>
                </div>
            </div> -->
        </div>
        <!-- 编辑模态框区域 -->
        <Modal
            v-model="modal1"
            title="编辑收货地址"
            @on-ok="add2"
            @on-cancel="add2">
            <Form ref="formValidate2" :model="formValidate2" :rules="ruleValidate2" :label-width="80">
                <FormItem label="收货人" prop="raFullname">
                    <Input v-model="formValidate2.raFullname" placeholder="请输入收货人姓名"/>
                </FormItem>
                <FormItem label="电话" prop="raPhone">
                    <Input v-model="formValidate2.raPhone" placeholder="请输入收货人电话"/>
                </FormItem>
                <FormItem label="省市区">
                    <el-cascader
                    :placeholder="placeholder"
                    :options="options"
                    v-model="selectedOptions2"
                    ref="cascaderAddr2"
                    @change="handleChange2">
                    </el-cascader>
                </FormItem>
                <FormItem label="详细地址" prop="raAddr">
                    <Input v-model="formValidate2.raAddr" placeholder="请输入详细地址"/>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="update('formValidate2')">保存</Button>
                </FormItem>
                <FormItem>
                    <Checkbox v-model="raDefaultAddrTwo" @on-change="isDefault">设置为默认收货地址</Checkbox>
                </FormItem>
            </Form>
        </Modal>
        <!-- 详情模态框区域 -->
        <Modal
            v-model="modal2"
            title="收货地址详情">
            <p>收货人：{{receiveAddr.raFullname}}</p>
            <p>电话：{{receiveAddr.raPhone}}</p>
            <p>详细地址：{{receiveAddr.raAddr}}</p>
            <p>是否默认收货地址：{{receiveAddr.raDefaultAddr}}</p>
        </Modal>
        <!-- 新增模态框区域 -->
        <Modal
            v-model="modal3"
            title="新增收货地址"
            @on-ok="add">
             <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="收货人" prop="raFullname">
                    <Input v-model="formValidate.raFullname" placeholder="请输入收货人姓名"/>
                </FormItem>
                <FormItem label="电话" prop="raPhone">
                    <Input v-model="formValidate.raPhone" placeholder="请输入收货人电话"/>
                </FormItem>
                <FormItem label="省市区">
                    <el-cascader
                    :options="options"
                    v-model="selectedOptions"
                    ref="cascaderAddr"
                    @change="handleChange">
                    </el-cascader>
                </FormItem>
                <FormItem label="详细地址" prop="raAddr">
                    <Input v-model="formValidate.raAddr" placeholder="请输入详细地址"/>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="save('formValidate')">保存</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
let pcas = require('../../../assets/pca-code.json')

export default {
    name: 'receiveAddress',
    data() {
        return {
            raId: 0, // 保存收货地址id
            options: pcas, // 省市区
            placeholder: '',
            selectedOptions: [],
            selectedOptions2: [],
            modal1: false, // 3个模态框
            modal2: false,
            modal3: false,
            raDefaultAddr: false, // 是否默认地址
            raDefaultAddr2: 0,
            raDefaultAddrTwo: false,
            raDefaultAddrTwo2: 0,
            raProvince: '', // 省市区
            raCity: '',
            raRegion: '',
            raProvince2: '',
            raCity2: '',
            raRegion2: '',
            formValidate: {
                raFullname: '',
                raPhone: '',
                raAddr: '',
            },
            ruleValidate: {
                raFullname: [
                    { required: true, message: '收货人不能为空', trigger: 'blur' },
                ],
                raPhone: [
                    { required: true, message: '电话不能为空', trigger: 'blur' },
                ],
                raAddr: [
                    { required: true, message: '详细地址不能为空', trigger: 'blur' },
                ],
            },
            formValidate2: {
                raFullname: '',
                raPhone: '',
                raAddr: '',
            },
            ruleValidate2: {
                raFullname: [
                    { required: true, message: '收货人不能为空', trigger: 'blur' },
                ],
                raPhone: [
                    { required: true, message: '电话不能为空', trigger: 'blur' },
                ],
                raAddr: [
                    { required: true, message: '详细地址不能为空', trigger: 'blur' },
                ],
            },
            addrList: [], // 收货地址列表
            receiveAddr: '', // 收货地址详情
            receiveAddr2: '', // 修改页面收货地址详情
        }
    },
    created() {
        this.findList()
    },
    methods: {
        // 新增时获取省市区地址级联
        handleChange(e, form, thsAreaCode) {
            // eslint-disable-next-line dot-notation
            thsAreaCode = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
            // console.log(thsAreaCode) // 注意3： 最终结果是个一维数组对象
            this.raProvince = thsAreaCode[0]
            this.raCity = thsAreaCode[1]
            this.raRegion = thsAreaCode[2]
        },
        // 修改时获取省市区地址级联
        handleChange2(e, form, thsAreaCode) {
            // eslint-disable-next-line dot-notation
            thsAreaCode = this.$refs['cascaderAddr2'].getCheckedNodes()[0].pathLabels
            this.raProvince2 = thsAreaCode[0]
            this.raCity2 = thsAreaCode[1]
            this.raRegion2 = thsAreaCode[2]
        },
        // 重置新增表单内容
        handleReset(name) {
            this.$refs[name].resetFields()
            this.selectedOptions = []
        },
        // 新增收货地址
        save(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$axios({
                        url: 'receiveAddress/save',
                        method: 'post',
                        params: {
                            raUid: JSON.parse(localStorage.getItem('user')).uId,
                            raProvince: this.raProvince,
                            raCity: this.raCity,
                            raRegion: this.raRegion,
                            raFullname: this.formValidate.raFullname,
                            raPhone: this.formValidate.raPhone,
                            raAddr: this.formValidate.raAddr,
                        },
                        headers: {
                            Authorization: localStorage.getItem('token'),
                        },
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.$Message.success(res.data.msg)
                        }
                    })
                } else {
                    this.$Message.error('Fail!')
                }
            })
        },
        // 新增收货确定后刷新列表重新获取地址列表
        add() {
            this.findList()
            this.formValidate = {}
            this.selectedOptions = []
        },
        // 编辑收货地址后刷新列表重新获取地址列表
        add2() {
            this.findList()
        },
        // 查询收货地址列表
        findList() {
            this.$axios({
                url: 'receiveAddress/findByUserId/' + JSON.parse(localStorage.getItem('user')).uId,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.addrList = res.data.list
                }
            })
        },
        // 根据Id删除此收货地址
        deleteById(id) {
            this.$axios({
                url: 'receiveAddress/deleteById/' + id,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.$Message.success(res.data.msg)
                    this.findList()
                }
            })
        },
        // 根据id查询此收货地址详情
        findById(id) {
            this.receiveAddr = ''
            this.modal2 = true
            this.$axios({
                url: 'receiveAddress/findById/' + id,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.receiveAddr = res.data.object
                    // 修改是否默认地址表示方式
                    if (res.data.object.raDefaultAddr === 0) {
                        this.receiveAddr.raDefaultAddr = '否'
                    } else {
                        this.receiveAddr.raDefaultAddr = '是'
                    }
                }
            })
        },
        // 编辑前先根据id查找此收货地址
        findByIdBefore(id) {
            this.modal1 = true
            this.$axios({
                url: 'receiveAddress/findById/' + id,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.formValidate2.raFullname = res.data.object.raFullname
                    this.formValidate2.raPhone = res.data.object.raPhone
                    this.formValidate2.raAddr = res.data.object.raAddr
                    // 修改是否默认地址表示方式
                    if (res.data.object.raDefaultAddr === 0) {
                        this.raDefaultAddrTwo = false
                    } else {
                        this.raDefaultAddrTwo = true
                    }
                    // this.selectedOptions2 = ['11', '1101', '110101']
                    this.placeholder = res.data.object.raProvince + '/' + res.data.object.raCity + '/' + res.data.object.raRegion
                    this.raProvince2 = res.data.object.raProvince
                    this.raCity2 = res.data.object.raCity
                    this.raRegion2 = res.data.object.raRegion
                }
            })
            this.raId = id
        },
        // 设置默认收货地址
        isDefault(value) {
            if (value) {
                this.raDefaultAddr2 = 1
            } else {
                this.raDefaultAddr2 = 0
            }
            this.$axios({
                url: 'receiveAddress/updateDefault',
                method: 'get',
                params: {
                    raUid: JSON.parse(localStorage.getItem('user')).uId,
                    raDefaultAddr: this.raDefaultAddr2,
                    raId: this.raId,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.$Message.success(res.data.msg)
                }
            })
        },
        // 修改收货地址
        update(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$axios({
                        url: 'receiveAddress/update',
                        method: 'get',
                        params: {
                            raId: this.raId,
                            raProvince: this.raProvince2,
                            raCity: this.raCity2,
                            raRegion: this.raRegion2,
                            raFullname: this.formValidate2.raFullname,
                            raPhone: this.formValidate2.raPhone,
                            raAddr: this.formValidate2.raAddr,
                        },
                        headers: {
                            Authorization: localStorage.getItem('token'),
                        },
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.$Message.success(res.data.msg)
                        }
                    })
                } else {
                    this.$Message.error('Fail!')
                }
            })
        },
    },
}
</script>

<style scoped>
.userHome-container {
    min-height:480px;
}
.add-receiveAddr {
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: flex-end;
    margin-bottom: 16px;
}
.receiveAddr-list{
    width: 100%;
    height: auto;
}
.receiveAddr-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid #e8eaec;
}
.my-phone {
    margin-left: 30px;
}
.item-right .edit {
    border-right: 1px solid #e8eaec;
    padding-right: 5px;
}
.item-right .more {
    margin-left: 5px;
    padding-right: 5px;
    border-right: 1px solid #e8eaec;
}
.item-right .delete {
    margin-left: 5px;
}
.defalut {
    margin-left: 8px;
    font-size: 10px;
    color:#ef4238;
}
</style>